<!DOCTYPE html>
<html lang="zh">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
  <title>test-2</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
  <link href="../lib/css/animate.min.css" rel="stylesheet">
  <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
  
</head>
<body>
  <div id="test" class="q-pa-lg">
    <q-btn @click="testModal = true; getHtml()" color="primary">打开</q-btn>
    <q-modal v-model="testModal" :content-css="{minWidth: '66vw', minHeight: '550px',borderRadius: '4px'}">
      <q-modal-layout>
        <q-toolbar slot="header" color="white">
          <q-toolbar-title class="text-dark">
            确认
          </q-toolbar-title>
          <q-btn flat @click="testModal = false">
            <q-icon name="close" color="dark"></q-icon>
          </q-btn>
        </q-toolbar>
        <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
          <q-card-main class="row gutter-x-md gutter-y-sm">
              <textarea id="editor_id" name="content" style="width:100%;height:300px;"></textarea>
          </q-card-main>
        </q-card>
        <q-toolbar slot="footer" color="white" class="row justify-end">
          <q-btn
            flat
            color="primary"
            >取消</q-btn>
          <q-btn
            flat
            color="primary"
            >确认</q-btn>
        </q-toolbar>
      </q-modal-layout>
    </q-modal>
    <hr>
    <!-- 2 使用这个组件 -->
    <ele :show="show"></ele>
    <q-btn @click="show = !show" color="primary">切换</q-btn>
    <hr>
    
  </div>
  
  <!-- ie-polyfill 、 vue.js and quasar-framework -->
  <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
  <script src="../lib/js/vue.js"></script>
  <script src="../lib/js/quasar.mat.umd.min.js"></script>
  <!-- jquery -->
  <script src="../lib/js/jquery-2.2.4.min.js"></script>
  <!-- layui -->
  <script src="../lib/layui/layui.js"></script>
  <!-- editor -->
  <script src="../lib//kindeditor/kindeditor-all.js"></script>
  <script src="../lib/kindeditor/lang/zh-CN.js"></script>
  <script>
    // 1 全局注册一个组件 ele
    Vue.component('ele', {
      props: {
        show: {
          type: Boolean,
          default: false
        }
      },
      render: function (createElement) {
        if (this.show) {
          return createElement('p', 'show is true')
        } else {
          return createElement('p', 'show is false')
        }
      }
    })
    Vue.prototype.window = window
    new Vue({
      el: "#test",
      data: function() {
        return {
          htmlDemo: '',
          htmlData: {},
          testModal: false,
          show: false,
        }
      },
      mounted () {
        KindEditor.ready(function(K) {
          window.editor = K.create('#editor_id');
        })
      },
      methods:{
        getHtml () {
          // setTimeout(() => {
          //   this.htmlData.inpvalue = '你好'
          //   this.htmlDemo = `
          //   <form class="layui-form">
          //     <div class="layui-col-xs12 layui-col-sm12 layui-col-md6 layui-col-lg6">
          //       <div class="layui-form-item">
          //         <label class="layui-form-label">数字</label>
          //         <div class="layui-input-block">
          //           <input class="layui-input" placeholder=""></input>
          //         </div>
          //       </div>
          //     </div>
          //     <div class="layui-col-xs12 layui-col-sm12 layui-col-md6 layui-col-lg6">
          //       <div class="layui-form-item">
          //         <label class="layui-form-label">数字</label>
          //         <div class="layui-input-block">
          //           <input class="layui-input" placeholder=""></input>
          //         </div>
          //       </div>
          //     </div>
          //   </form>
          //   `
          //   layui.use(['form'], function() {
          //     var form = layui.form

          //     form.render()
          //   })
          // }, 2000);
        },
      }
    })
  </script>
</body>
</html>